<template>
    <div class="err">
        <div class="container">
            <h1 @click="backToHomePage">
                页面丢失
            </h1>
        </div>
    </div>
</template>

<script>
import router from '@/router'
export default {
    data() {
        return {
        }
    },
    methods: {
        backToHomePage: function() {
            router.push({ name: 'Market' })
        }
    }
}
</script>

<style lang="less" scoped>
    .err{
        display: table;
        width: 100%;
        height: 100vh;
        text-align: center;
        margin: 0;
        transition: all 0.6s;
        user-select: none;

        // 颜色随主题变化
        @err-color: rgba(0, 0, 0, 0.5);
        // @err-bg-path: "../assets/image/err-bg.png";
        .container{
            display: table-cell;
            vertical-align: middle;
            h1{            
                transition: all 0.3s;
                color: @err-color;
                font-size: 50px;
                font-weight: 500;
                display: inline-block;
                padding: 5px, 10px;
                // animation: amt 6s alternate infinite ease-in-out;
                animation: ~"amt 1s ease-in-out";
                // animation-fill-mode: forwards;
                white-space:nowrap;
                overflow: hidden;
                width: 230px;
                #bundle.anime-end();
                &:hover {
                    box-shadow: 
                        inset -3px 0px 12px @err-color,
                        inset 0px -3px 12px @err-color,
                        inset 3px 3px 12px @err-color;
                }
                &:active {
                    box-shadow: 
                        inset -3px 0px 18px @err-color,
                        inset 0px -3px 18px @err-color,
                        inset 3px 3px 18px @err-color;
                }
                // background-size: 230px;
                // background-image:url("@{err-bg-path}");
                // background-repeat: no-repeat;
                // background-position: 0 0;
            }
        }

        @keyframes amt{
            0%{
                #bundle.anime-start();
            }
            60%{
                width: #bundle.anime-end[width];
                box-shadow: #bundle.anime-start[box-shadow];
            }
            100%{
                #bundle.anime-end();
            }
        }

        #bundle() {
            .anime-start {
                width: 3px;
                box-shadow: 
                    inset -3px 0px 0px @err-color;
            }
            .anime-end {
                width: 230px;
                box-shadow: 
                    inset -3px 0px 6px @err-color,
                    inset 0px -3px 6px @err-color,
                    inset 3px 3px 6px @err-color;
            }
        }
    }
    // SHOW TO DEV
    /* SHOW TO USER */
</style>